<template>
  <div class="table-wrap">
    <div class="form-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.user"
            placeholder="输入名称/编号/其他搜索"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.region"
            placeholder="输入商品名称搜索"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="handleAdd">新增商品</el-button>
          <el-button type="warning">批量删除</el-button>
        </el-form-item>
      </el-form>
      <div class="operate-btn-wrap">
        <el-button type="primary">类别筛选</el-button>
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary">导出Excel</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55">
        <template #default="scope">
          {{ getIndex(scope.$index) }}
        </template>
      </el-table-column>

      <el-table-column
        v-for="item in tableHeader"
        :key="item"
        :prop="item.prop"
        :label="item.name"
      >
        <template #default="scope">
          <img
            :src="scope.row[item.prop]"
            v-if="item.prop == 'fm' || item.prop == 'su'"
            style="width: 80px; height: 60px"
            alt=""
          />
          <div v-if="item.prop == 'sftgyp'">
            {{ scope.row[item.prop] == 0 ? "是" : "否" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button @click="copyRow(scope.row)" link type="primary"
            >复制</el-button
          >
          <el-button @click="handleEdit(scope.row)" link type="primary"
            >编辑</el-button
          >
          <!-- <el-button @click="handleListing(scope.row)" link type="primary"
            >上架</el-button
          > -->
          <el-button @click="handleDelete(scope.row)" link type="primary"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30%"
      align-center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <template v-for="item in tableHeader" :key="item">
          <el-form-item
            v-if="!item.hidden"
            :label="item.name"
            :prop="item.prop"
            required
          >
            <el-select
              v-if="item.type == 'select'"
              :multiple="item.multi ? true : false"
              v-model="ruleForm[item.prop]"
              placeholder=""
            >
              <el-option label="住宅" value="0" />
              <el-option label="公寓" value="1" />
            </el-select>
            <el-input
              v-if="item.type == 'input'"
              placeholder="请输入"
              v-model="ruleForm[item.prop]"
            ></el-input>
            <el-upload
              v-if="item.type == 'uploadImg'"
              v-model:file-list="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture"
            >
              <el-button type="primary">上传图片</el-button>
            </el-upload>
            <NumberRange
              :value="ruleForm[item.prop]"
              v-if="item.type == 'numberRange'"
            ></NumberRange>
            <div v-if="item.type == 'text'">{{ ruleForm[item.prop] }}</div>
            <el-radio-group
              v-if="item.type == 'isRadio'"
              v-model="ruleForm[item.prop]"
            >
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmForm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="centerDialogVisible"
      title="邀请链接"
      width="60%"
      align-center
    >
      <div :class="copyLinkActive ? 'active' : ''" class="link-content">
        {{ copyLinkValue }}
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="confirmCopy"> 复制 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import NumberRange from "@/components/InputNumberRange";
import { ElMessage, ElMessageBox } from "element-plus";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const multipleTableRef = ref();
const multipleSelection = ref([]);
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row);
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const currentPage = ref(1);
const pageSize = ref(10);
const tableHeader = [
  { prop: "cls", name: "材料商", type: "select" },
  { prop: "fm", name: "封面", type: "uploadImg" },
  { prop: "spmc", name: "商品名称", type: "input" },
  { prop: "pp", name: "品牌", type: "input" },
  { prop: "cldl", name: "材料大类", type: "select" },
  { prop: "yjcl", name: "一级材料", type: "select", multi: true },
  { prop: "ejcl", name: "二级材料", type: "select", multi: true },
  { prop: "sjcl", name: "三级材料", type: "select", multi: true },
  { prop: "xh", name: "型号", type: "input" },
  { prop: "gg", name: "规格", type: "input" },
  { prop: "cd", name: "产地", type: "input" },
  { prop: "sftgyp", name: "是否提供样品", type: "isRadio" },
];
const getIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};
const dialogTitle = ref("添加商品");
const dialogType = ref("add");
const dialogVisible = ref(false);
const centerDialogVisible = ref(false);
const copyLinkValue = ref("");
const copyLinkActive = ref(false);
const handleEdit = (item) => {
  console.log("item", item);
  dialogTitle.value = "编辑商品";
  dialogType.value = "edit";
  dialogVisible.value = true;
};
const handleListing = (item) => {};
const copyLink = (item) => {
  centerDialogVisible.value = true;
  copyLinkValue.value = item.link;
  copyLinkActive.value = false;
};
const confirmCopy = () => {
  copyLinkActive.value = true;
  setTimeout(() => {
    centerDialogVisible.value;
    ElMessage({
      type: "success",
      message: "复制邀请",
    });
  }, 1000);
};
const handleDelete = (item) => {
  ElMessageBox.confirm("确认删除此商品信息?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const copyRow = (item) => {
  ElMessage({
    type: "success",
    message: "复制成功",
  });
  setTimeout(() => {
    dialogTitle.value = "添加商品";
    dialogType.value = "add";
    dialogVisible.value = true;
  }, 1000);
};
const handleAdd = () => {
  dialogTitle.value = "添加商品";
  dialogType.value = "add";
  dialogVisible.value = true;
};
const tableData = [
  {
    cls: "材料商",
    fm: "https://img1.baidu.com/it/u=1658804005,205716525&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    spmc: "商品名称",
    pp: "品牌",
    cldl: "材料大类",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
    xh: "型号",
    gg: "规格",
    cd: "产地",
    sftgyp: 0,
  },
  {
    cls: "材料商",
    fm: "https://img1.baidu.com/it/u=1658804005,205716525&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    spmc: "商品名称",
    pp: "品牌",
    cldl: "材料大类",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
    xh: "型号",
    gg: "规格",
    cd: "产地",
    sftgyp: 0,
  },
  {
    cls: "材料商",
    fm: "https://img1.baidu.com/it/u=1658804005,205716525&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    spmc: "商品名称",
    pp: "品牌",
    cldl: "材料大类",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
    xh: "型号",
    gg: "规格",
    cd: "产地",
    sftgyp: 0,
  },
];
const onSubmit = () => {};
const ruleFormRef = ref();
const ruleForm = reactive({
  fm: "",
  clsmc: "",
  jsxx: "",
  service: ["0"],
  iphone: "",
  zycl: ["0"],
  sps: "1",
  tgyps: "1",
});
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});
const confirmForm = () => {};
</script>
<style lang="scss" scoped>
.table-wrap {
  padding: 20px;
  .form-header {
    display: flex;
    justify-content: space-between;
  }
}
.demo-ruleForm {
  width: 100%;
  .el-select {
    width: 100%;
  }
}
.link-content {
  height: 80px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  &.active {
    background: #cff4df;
    border-color: #cff4df;
  }
}
</style>
